<template>
  <div class="nav-dropdown">
    <el-dropdown>
      <!-- <span class="el-dropdown-link">
        个人信息
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span> -->
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        class="avatar"
        @mouseenter="enter"
      />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided @click="router.push('/main')"
            >首页</el-dropdown-item
          >
          <el-dropdown-item divided>个人信息</el-dropdown-item>
          <el-dropdown-item divided @click="logOut">退出登录</el-dropdown-item>

          <!-- <el-dropdown-item divided>Action 5</el-dropdown-item> -->
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <HyDialog ref="hyDialogRef" @handleConfirmClick="handleConfirmClick">
      <template #content>
        <span>是否退出登录？</span>
      </template>
    </HyDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import router from '@/router';
import HyDialog from '@/base-ui/HyDialog/hy-dialog.vue';
import { useStore } from '@/store';
const store = useStore();
const hyDialogRef = ref<InstanceType<typeof HyDialog>>();
const logOut = () => {
  if (hyDialogRef.value) {
    hyDialogRef.value.dialogVisible = true;
  }
};
const handleConfirmClick = () => {
  store.dispatch('login/userLogOut');
};
const enter = () => {
  console.log('鼠标移入');
};
</script>

<style scoped lang="less">
.nav-dropdown {
  display: flex;
  align-items: center;
  .avatar {
    cursor: pointer;
  }
}
</style>
